<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<link rel="stylesheet" type="text/css" href="font/iconfont.css"/>
		<link rel="stylesheet" type="text/css" href="fonts/iconfont.css"/>
		<script src="js/rem.js" type="text/javascript" charset="utf-8"></script>
		<link rel="stylesheet" type="text/css" href="css/城市.css"/>
		<link rel="stylesheet" type="text/css" href="css/base1.css"/>
	</head>
	<body>
		<header>
			<span class="iconfont icon-iconfront-"></span>
			<p>北京/Beijing</p>
		</header>
		<main>
			<p>中国/China</p>
			<div>
				<dl>
					<dt><img src="img/北京.png" ></dt>
					<dd>北京</dd>
					<span>Beijing</span>
				</dl>
				<dl>
					<dt><img src="img/上海.png" ></dt>
					<dd>上海</dd>
					<span>Shanghai</span>
				</dl>
				<dl>
					<dt><img src="img/杭州.png" ></dt>
					<dd>杭州</dd>
					<span>Hangzhou</span>
				</dl>
				<dl>
					<dt><img src="img/广州.png" ></dt>
					<dd>广州</dd>
					<span>Guangzhou</span>
				</dl>
				<dl>
					<dt><img src="img/苏州.png" ></dt>
					<dd>苏州</dd>
					<span>Suzhou</span>
				</dl><dl>
					<dt><img src="img/厦门.png" ></dt>
					<dd>厦门</dd>
					<span>Xiamen</span>
				</dl>
				<dl>
					<dt><img src="img/成都.png" ></dt>
					<dd>成都</dd>
					<span>Chengdu</span>
				</dl>
				<dl>
					<dt><img src="img/武汉.png" ></dt>
					<dd>武汉</dd>
					<span>Wuhan</span>
				</dl>
				<dl>
					<dt><img src="img/深圳.png" ></dt>
					<dd>深圳</dd>
					<span>Shengzhen</span>
				</dl><dl>
					<dt><img src="img/南京.png" ></dt>
					<dd>南京</dd>
					<span>Nanjing</span>
				</dl>
				<dl>
					<dt><img src="img/西安.png" ></dt>
					<dd>西安</dd>
					<span>Xian</span>
				</dl>
				<dl>
					<dt><img src="img/天津.png" ></dt>
					<dd>天津</dd>
					<span>Tianjin</span>
				</dl>
				<dl>
					<dt><img src="img/苏州.png" ></dt>
					<dd>苏州</dd>
					<span>Suzhou</span>
				</dl>
				<dl>
					<dt><img src="img/广州.png" ></dt>
					<dd>广州</dd>
					<span>Guangzhou</span>
				</dl>
				<dl>
					<dt><img src="img/厦门.png" ></dt>
					<dd>厦门</dd>
					<span>Xiamen</span>
				</dl>
			</div>
			
		</main>
		<script type="text/javascript">
			var ex=document.querySelector(".icon-iconfront-")
			ex.onclick=function(){
				location.href="recommend-beijing.html";
			}
			
			let dls = document.querySelectorAll('div dl')
			
			for(let i = 0;i<dls.length;i++){
				dls[i].onclick = function(){
					console.log(dls[i])
					let city = dls[i].querySelector('dd').innerHTML;
					console.log(city)
					let pin = dls[i].querySelector('span').innerHTML;
					localStorage.setItem('city',city)
					localStorage.setItem('pin',pin)
					location.href="recommend-beijing.html";
					
				}
			}
			
			
			let City = document.querySelector('header p')
			if(localStorage.getItem('city')==null){
				City.innerHTML = '北京/Beijing';
			}else{
				City.innerHTML = localStorage.getItem('city')+'/'+localStorage.getItem('pin');
			}
		</script>
	</body>
</html>
